<template>
  <el-dialog v-model="isshow">
    <el-form v-if="isshow">
      <el-form-item label="name">{{ form.name }}</el-form-item>
      <el-form-item label="time">
        <el-date-picker v-model="form.time" :default-value="form.time"></el-date-picker>
      </el-form-item>
      <el-form-item label="note">
        <el-input type="textarea" v-model="form.note" autosize></el-input>
      </el-form-item>
      <el-form-item label="progress">
        <el-input-number v-model="form.progress"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="() => (isshow = false)">取消</el-button>
      <el-button @click="onConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      isshow: false,
      form: {
        time: '',
        note: '',
        progress: 0
      },
      isEdit: false
    }
  },
  methods: {
    add(options) {
      let book = options.book
      this.form = Object.assign({}, this.form, {
        name: book.name,
        time: '',
        note: '',
        progress: ''
      })
      this.form.time = this.form.time ? new Date(this.form.time) : new Date()
      this.book = book
      this.isshow = true
      this.isEdit = false
    },
    edit(row) {
      this.form = Object.assign(row.toJSON())
      this.form.time = this.form.time ? new Date(this.form.time) : new Date()
      this.isshow = true
      this.isEdit = true
      this.row = row
    },
    onConfirm() {
      this.isshow = false
      if (this.isEdit) {
        this.row.edit(this.form)
      } else {
        this.book.progress.add(this.form)
      }
    }
  }
}
</script>
